<template>
  <div class="products">
    <div class="products__title">{{shopName}}</div>
    <div class="products__list">
      <div
        class="products__list__item"
        v-for="item in productList"
        :key="item._id"
      >
        <template v-if="item.count > 0">
          <img class="products__list__item__img" :src="item.imgUrl"/>
          <div class="products__list__item__detail">
            <h4 class="detail__title">{{item.name}}</h4>
            <p class="detail__price">
              <span class="detail__price__single">
                <span class="detail__price__yen">&yen;</span>
                {{item.price}} x {{item.count}}
              </span>
              <span class="detail__price__total">
                <span class="detail__price__yen">&yen; </span>
                {{ (item.price*item.count).toFixed(2)}}
              </span>
            </p>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import {useRoute} from "vue-router";
import {useCommonCartEffect} from "@/effects/cartEffect";

export default {
  name: "ProductList",
  setup(){
    const route = useRoute();
    const shopId = route.params.id;
    const {productList, shopName} = useCommonCartEffect(shopId);

    return {productList, shopName}
  }
}
</script>

<style lang="scss" scoped>
@import '../../style/variables';
@import '../../style/mixins';

.products {
  margin: .16rem .18rem .1rem .18rem;
  background: $bgColor;

  &__title {
    font-size: .16rem;
    color: $content-fontColor;
    margin-top: .16rem;
    padding: .16rem .16rem 0 .16rem;
  }

  &__list {
    max-height: calc(100vh - 1.96rem - 0.49rem - 0.16rem - 0.10rem - 0.50rem);
    overflow-y: auto;

    &__item {
      position: relative;
      display: flex;
      padding: .16rem;

      &__img {
        width: .46rem;
        height: .46rem;
        margin-right: .16rem;
      }

      &__detail {
        flex: 1;

        .detail__title {
          margin: 0;
          line-height: .2rem;
          font-size: .14rem;
          color: $content-fontColor;

          @include ellipsis();
        }

        .detail__price {
          display: flex;
          margin: .06rem 0 0 0;
          line-height: .2rem;
          font-size: .14rem;
          color: $highlight-fontColor;

          &__single {
          }

          &__total {
            flex: 1;
            text-align: right;
            color: $dark-fontColor;
          }

          &__yen {
            font-size: .12rem;
          }
        }
      }
    }
  }

}

</style>
